<template>
  <ContentWrap>
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">承检机构</span>
          <div class="button-group">
            <el-button type="primary" @click="submitForm">保存</el-button>
            <el-button @click="goBack">返回</el-button>
          </div>
        </div>
      </template>

      <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" class="mt-20px">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="机构名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入机构名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="机构地址" prop="address">
              <el-input v-model="formData.address" placeholder="请输入机构地址" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label-width="180"
              label="统一社会信用代码"
              prop="unifiedSocialCreditIdentifier"
            >
              <el-input
                v-model="formData.unifiedSocialCreditIdentifier"
                placeholder="请输入统一社会信用代码"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="法人单位名称" prop="legalPersonCompany">
              <el-input v-model="formData.legalPersonCompany" placeholder="请输入法人单位名称" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="机构管理员" prop="manager">
              <el-input v-model="formData.manager" placeholder="请输入机构管理员" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20"/>
      </el-form>
    </el-card>
  </ContentWrap>
</template>

<script setup lang="ts">
import {
  OrganizationQualificationApi,
  OrganizationQualificationVO
} from '@/api/qis/organizationqualification'
import { useRouter, useRoute } from 'vue-router'

// 扩展VO接口以包含额外的表单字段
interface ExtendedOrganizationQualificationVO extends OrganizationQualificationVO {}

const route = useRoute()
const type = route.query.type
const id = route.query.id

defineOptions({ name: 'OrganizationQualificationAdd' })

const router = useRouter()
const message = useMessage()

const loading = ref(false)
const formRef = ref()

// 表单数据
let formData = reactive<any>({})

watch(formData, (newVal) => {
  console.log(newVal, 'newVal')
})

// 根据id获取单条数据
const getDetail = async () => {
  nextTick(async () => {
    if (id) {
      const res = await OrganizationQualificationApi.getOrganizationQualificationById(Number(id))
      Object.assign(formData, res)
    }
  })
}

onMounted(() => {
  getDetail()
  
  if(route.query.id){
    route.meta.title = '编辑承检机构管理'
  }else {
    route.meta.title = '新增承检机构管理'
  }
})

onActivated(() => {
  getDetail()
})

// 表单校验规则
const rules = reactive({
  name: [
    { required: true, message: '请输入机构名称', trigger: 'blur' },
    { max: 50, message: '长度不能超过50个字符', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '请输入机构地址', trigger: 'blur' },
    { max: 50, message: '长度不能超过50个字符', trigger: 'blur' }
  ],
  unifiedSocialCreditIdentifier: [
    { required: true, message: '请输入社会信用代码', trigger: 'blur' },
    { max: 50, message: '长度不能超过30个字符', trigger: 'blur' }
  ],
  legalPersonCompany: [
    { required: true, message: '请输入法人单位名称', trigger: 'blur' },
    { max: 50, message: '长度不能超过50个字符', trigger: 'blur' }
  ],
  manager: [{ max: 50, message: '长度不能超过30个字符', trigger: 'blur' }],
  type: [{ required: true, message: '请选择证书类型', trigger: 'change' }],
  num: [{ required: true, message: '请输入证书编号', trigger: 'blur' }],
  licenceIssuingAuthority: [{ required: true, message: '请输入发证机关', trigger: 'blur' }],
  issueDate: [{ required: true, message: '请选择发证时间', trigger: 'blur' }],
  expireTime: [{ required: true, message: '请选择有效日期', trigger: 'blur' }]
})

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return
  await formRef.value.validate()
  if (id) {
    try {
      console.log('修改')
      await OrganizationQualificationApi.updateOrganizationQualificationById(formData)
      message.success('修改成功')
      goBack()
      Object.assign(formData, {})
    } catch (error) {
      // message.error('修改失败')
    }
  } else {
    loading.value = true
    const submitData = {
      ...formData
      // type: Number(formData.type),
      // orgId: Number(formData.orgId)
    }
    const res = await OrganizationQualificationApi.createOrganizationQualification(
      submitData as OrganizationQualificationVO
    )
    if (res.code === 500) {
      message.error(res.msg)
    } else {
      message.success('新增成功')
      Object.assign(formData, {})
      goBack()
    }
    loading.value = false
  }
}

// 返回列表页
const goBack = () => {
  router.push('/InspectionInfoManagement1/OrganizationQualification')
  formRef.value.resetFields()
}
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    font-size: 16px;
    font-weight: bold;
  }

  .button-group {
    display: flex;
    gap: 10px;
  }
}

.mt-20px {
  margin-top: 20px;
}
</style>
